<!--  -->
<template>
  <div class="page">
    <div class="yemian">
      <span class="title">采购明细</span>
      <div class="biao">
        <div class="caidan">
          <div class="son">采购单号</div>
          <div class="son">{{ list.purchaseId }}</div>
        </div>
        <div class="caidan">
          <div class="son">供应商ID</div>
          <div class="son">{{ list.supplierId }}</div>
        </div>
        <div class="caidan">
          <div class="son">供应商名称</div>
          <div class="son">
            {{ list.supplierNameShort }}
          </div>
          <!--           <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
          ></el-autocomplete> -->
        </div>
        <div class="caidan">
          <div class="son">供应商类别</div>
          <div class="son">{{ list.typeName }}</div>
        </div>
        <div class="caidan">
          <div class="son">下单人</div>
          <div class="son">
            {{ list.supervisorName }}
          </div>
        </div>
        <div class="caidan">
          <div class="son">收货地址</div>
          <div class="son">{{ list.address }}</div>
        </div>
        <div class="caidan">
          <div class="son">创建日期</div>
          <div class="son">{{ list.createTime }}</div>
        </div>
        <div class="caidan">
          <div class="son">供货日期</div>
          <div class="son">{{ list.eliveryTime }}</div>
        </div>
        <div class="caidan">
          <div class="son">采购状态</div>
          <div class="son"
               v-if="list.status == 0">计划</div>
          <div class="son"
               v-if="list.status == 1">发出</div>
          <div class="son"
               v-if="list.status == 2">供货</div>
          <div class="son"
               v-if="list.status == 3">完成</div>
        </div>
        <!-- <div class="caidan">
          <div class="son"></div>
          <div class="son"></div>
        </div>
        <div class="caidan">
          <div class="son"></div>
          <div class="son"></div>
        </div>
        <div class="caidan">
          <div class="son"></div>
          <div class="son"></div>
        </div> -->
      </div>
      <div class="caozuo">
        <el-button v-if="qu_zhi"
                   class="anniu"
                   type="primary"
                   @click="bianji">编辑表单</el-button>
        <el-button v-if="qu_zhi"
                   class="anniu"
                   type="primary"
                   @click="xz_shop">新增商品</el-button>
        <!--      <el-button class="anniu" type="primary" @click="baocun">保存</el-button> -->
        <el-button v-show="qu_zhi"
                   class="anniu"
                   type="primary"
                   @click="shenhe">审核</el-button>
      </div>
      <div class="biaodan">
        <template>
          <el-table :data="list.purchaseGoods"
                    border
                    style="width: 100%">
            <el-table-column type="index"
                             label="序号"
                             width="auto">
            </el-table-column>
            <el-table-column prop="goodsId"
                             label="商品ID"
                             width="auto">
            </el-table-column>
            <el-table-column prop="goodsName"
                             label="商品名称"
                             width="auto">
            </el-table-column>
            <el-table-column prop="num"
                             label="采购数量"
                             width="auto">
            </el-table-column>
            <el-table-column prop="unit"
                             label="辅助单位"
                             width="auto">
            </el-table-column>
            <el-table-column prop="weight"
                             label="采购重量"
                             width="auto">
            </el-table-column>
            <el-table-column prop="price"
                             label="采购价格"
                             width="auto">
            </el-table-column>
            <el-table-column prop="totalPrice"
                             label="总金额"
                             width="auto">
            </el-table-column>
            <el-table-column fixed="right"
                             label="操作"
                             width="auto">
              <template slot-scope="scope"
                        v-if="qu_zhi">
                <el-button size="mini"
                           type="primary"
                           @click="bj_bd(scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="info"
                           @click="shanchu(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 新增商品 -->
      <el-dialog :title="zhuangtai.title"
                 :visible.sync="tanchuang"
                 :before-close="handleClose">
        <el-form :model="form">
          <div class="xinzen"
               v-if="zhuangtai.zhi == 1">
            <el-form-item class="tanchukuang"
                          label="选择供应商"
                          :label-width="formLabelWidth">
              <el-select v-model="form.gonyin"
                         @visible-change="tc_xs">
                <el-option v-for="item in gonyin_zhi"
                           :key="item.supplierId"
                           :label="item.supplierNameShort"
                           :value="item.supplierId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="tanchukuang"
                          label="收货地址"
                          :label-width="formLabelWidth">
              <el-input class="tc_sr"
                        v-model="form.address"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item name="fucck"
                          class="tanchukuang"
                          label="供货日期"
                          :label-width="formLabelWidth">
              <el-date-picker class="neirong"
                              v-model="form.eliveryTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="xinzen"
               v-if="zhuangtai.zhi == 2 || zhuangtai.zhi == 3">
            <el-form-item v-if="zhuangtai.zhi == 2"
                          class="tanchukuang"
                          label="选择商品"
                          :label-width="formLabelWidth">
              <el-select v-model="d_biaodan.sp.label"
                         @change="xz_sp">
                <el-option v-for="item in d_shangpin"
                           placeholder="请选择商品"
                           :key="item.supplierId"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="zhuangtai.zhi == 3"
                          class="tanchukuang">
              <!-- <el-select v-model="d_biaodan.sp.label"
                         @change="xz_sp">
                <el-option v-for="item in d_shangpin"
                           placeholder="请选择商品"
                           :key="item.supplierId"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item class="tanchukuang"
                          label="采购数量(数值)"
                          :label-width="formLabelWidth">
              <el-input class="tc_sr"
                        v-model="d_biaodan.sl"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="tanchukuang"
                          label="辅助单位"
                          :label-width="formLabelWidth">
              <el-input class="tc_sr"
                        v-model="d_biaodan.dw"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="tanchukuang"
                          label="采购重量(斤)"
                          :label-width="formLabelWidth">
              <el-input class="tc_sr"
                        v-model="d_biaodan.zl"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="tanchukuang"
                          label="采购价格(元)"
                          :label-width="formLabelWidth">
              <el-input class="tc_sr"
                        v-model="d_biaodan.jg"
                        autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="tanchuang = false">取 消</el-button>
          <el-button type="primary"
                     @click="quedin">确 定</el-button>
        </div>
      </el-dialog>
      <!--新增 -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  gonyin_liebiao,
  caigou_xq,
  caigou_xg,
  caigou_cx,
  goodQuery,
  cg_zenjia,
  cg_mx_sc,
  cg_mx_xg,
  checkbtn
} from "@/api/gonyin.js";
import { type } from "os";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      formLabelWidth: "120px",
      tanchuang: false,
      zhuangtai: {
        zhi: "",
        title: ""
      },
      form: {
        //采购单编号
        purchaseId: "",
        //收货地址
        address: "",
        //供货时间
        eliveryTime: "",
        gonyin: []
      },
      loading: false,
      list: "",
      d_lb: "",
      value1: [],
      danhao: "",
      xiadan: "",
      shouhuo: "",
      riqi: "",
      gonhuo: "",
      qu_id: 1,
      qu_zhi: "",
      gonyin: "",
      gonyin_zhi: [],
      d_shangpin: [],
      d_biaodan: {
        sp: { label: "", value: "" },
        sl: "",
        dw: "",
        zl: "",
        jg: ""
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //编辑商品
    bj_bd(e) {
      console.log(e, "编辑商品");
      this.tanchuang = true;
      this.zhuangtai.zhi = 3;
      this.zhuangtai.title = "编辑商品";
      this.d_biaodan = {
        sp: { label: e.goodsName, value: e.goodsId },
        sl: e.num,
        dw: e.unit,
        zl: e.weight,
        jg: e.price
      };
    },
    //选择商品
    xz_sp(e) {
      console.log(e, "选择商品");
      // console.log(ty)
      console.log(typeof e);
      let obj = {};
      obj = this.d_shangpin.find(item => {
        return item.value === e; //筛选出匹配数据
      });
      console.log(obj.name, e);
      this.d_biaodan.sp = { label: obj.label, value: e };
    },
    //删除商品
    shanchu(e) {
      console.log(e, "删除商品");
      let da_id = this.qu_id;
      let xiao_id = this.list.purchaseGoods[e].goodsId;
      let data = { goodsId: xiao_id, purchaseId: da_id };
      cg_mx_sc(data).then(res => {
        /*   this.list.splice(index, 1); */
        this.xq_list();
        this.shangpin();
      });
    },
    //新增商品
    xz_shop() {
      console.log(this.qu_zhi, "8888888888888888888");
      this.tanchuang = true;
      this.zhuangtai.zhi = 2;
      this.zhuangtai.title = "新增商品";
      console.log("新增");
    },
    //关闭弹窗
    handleClose() {
      this.tanchuang = false;
      console.log("关闭弹窗");
      this.d_biaodan = {
        sp: { label: "", value: "" },
        sl: "",
        dw: "",
        zl: "",
        jg: ""
      };
      this.xq_list();
      this.shangpin();
    },
    //弹窗确定
    quedin(e) {
      console.log(this.form);
      if (this.zhuangtai.zhi == 1) {
        this.xiugai_top();
      } else if (this.zhuangtai.zhi == 2) {
        this.xinzen();
      } else if (this.zhuangtai.zhi == 3) {
        this.xiugai_sp();
      }
    },
    //修改商品
    xiugai_sp() {
      let zhi = this.d_biaodan;
      if (zhi.sp.value == "") {
        this.$message("请选择商品");
      } else if (isNaN(Number(zhi.sl)) && Number(zhi.sl) != 0) {
        this.$message("采购数量只能为数字或者空");
      } else if (isNaN(Number(zhi.zl)) && Number(zhi.zl) != 0) {
        this.$message("采购重量只能为数字或者空");
      } else if (isNaN(Number(zhi.jg)) && Number(zhi.jg) != 0) {
        this.$message("采购价格只能为数字或者空");
      } else {
        let data = {
          goodsId: zhi.sp.value,
          goodsName: zhi.sp.label,
          num: zhi.sl,
          weight: zhi.zl,
          unit: zhi.dw,
          price: zhi.jg,
          purchaseId: this.list.purchaseId
        };
        cg_mx_xg(data).then(res => {
          this.handleClose();
          console.log(res, "修改商品");
        });
      }
    },
    //新增商品
    xinzen() {
      console.log(thi.qu_zhi, "FFFFFK");
      let zhi = this.d_biaodan;
      if (zhi.sp.id == "") {
        this.$message("请选择商品");
      } else if (isNaN(Number(zhi.sl)) && Number(zhi.sl) != 0) {
        this.$message("采购数量只能为数字或者空");
      } else if (isNaN(Number(zhi.zl)) && Number(zhi.zl) != 0) {
        this.$message("采购重量只能为数字或者空");
      } else if (isNaN(Number(zhi.jg)) && Number(zhi.jg) != 0) {
        this.$message("采购价格只能为数字或者空");
      } else {
        console.log("新增通过校验");
        let data = {
          goodsId: zhi.sp.value,
          goodsName: zhi.sp.label,
          num: zhi.sl,
          weight: zhi.zl,
          unit: zhi.dw,
          price: zhi.jg,
          purchaseId: this.list.purchaseId
          // goodsId:this.d_biaodan.sp.value,
          // goodsName:this.d_biaodan.sp.label
        };
        cg_zenjia(data).then(res => {
          this.handleClose();
        });
      }
    },
    //修改表头
    xiugai_top() {
      let form = this.form;
      // // debugger
      if (form.gonyin == "") {
        // debugger
        this.$message("请选择供应商");
      } else if (form.address == "") {
        this.$message("请输入地址");
      } else if (form.eliveryTime == "") {
        this.$message("请选择供货日期");
      } else {
        let data = {
          purchaseId: this.form.purchaseId,
          supplierId: this.form.gonyin,
          address: this.form.address,
          eliveryTime: this.form.eliveryTime
        };
        console.log(data, "修改表头确定");
        caigou_xg(data).then(res => {
          console.log(res, "修改结果");
          // debugger
          if (res.data) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.handleClose();
          }
        });
      }
    },
    //回填表头
    bianji() {
      this.tanchuang = true;
      this.zhuangtai.zhi = 1;
      let list = this.list;
      this.zhuangtai.title = "编辑表格";
      this.form = {
        purchaseId: list.purchaseId,
        address: list.address,
        gonyin: Number(list.supplierId),
        eliveryTime: list.eliveryTime
      };
      this.gonyin_zhi = [
        {
          supplierId: Number(list.supplierId),
          supplierNameShort: list.supplierNameShort
        }
      ];
    },

    //供应商下拉菜单
    remoteMethod() {
      let data = {};
      caigou_cx(data).then(res => {
        console.log(res);
        this.gonyin = res.rows;
        console.log(res.rows, "供应商");
      });
    },
    tc_xs(e) {
      console.log("下拉框赋值");
      console.log(this.gonyin_zhi);
      console.log(this.gonyin);
      if (e) {
        this.gonyin_zhi = this.gonyin;
      }
    },
    //保存信息
    baocun() {
      /*   this.top_bianji = true; */
      this.$message({ message: "保存成功", type: "success" });
    },
    //审核表单
    shenhe() {
      var purchaseId = { purchaseId: this.qu_id };
      checkbtn(purchaseId).then(res => {
        console.log(res);
        if (res.code === 20000) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.xq_list();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //页面数据请求
    xq_list() {
      let data = { purchaseId: this.qu_id };
      caigou_xq(data).then(res => {
        console.log(res.data, "页面数据");
        this.list = res.data;
      });
    },
    shangpin() {
      console.log("商品信息");
      // let data = { purchaseId: this.qu_id };
      goodQuery().then(res => {
        // console.log(res.)
        this.d_shangpin = res.rows;
        console.log(res, "商品信息");
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.qu_id = this.$route.query.id;
    this.qu_zhi = this.$route.query.zhi;
    console.log("id", this.qu_id, "状态", this.qu_zhi, type(this.qu_zhi));
    this.xq_list();
    this.remoteMethod();
    this.shangpin();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {
    this.qu_id = this.$route.query.id;
    this.qu_zhi = this.$route.query.zhi;
    console.log("id", this.qu_id, "状态", type(this.qu_zhi));
  }, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类

.page {
  display: flex;
  justify-content: center;
  font-size: 15px;
  .yemian {
    display: flex;
    width: 95%;
    flex-direction: column;
    .title {
      font-size: 20px;
      margin: 20px 0px 20px 20px;
    }
    .biao {
      display: flex;
      width: 100%;
      height: auto;
      flex-wrap: wrap;
      justify-content: center;
      /*   border: 0.1px #d3d3d3 solid; */
      .caidan {
        display: inline-flex;
        /*     border: 0.1px #d3d3d3 solid; */
        .son {
          display: flex;
          border: 0.1px#D3D3D3 solid;
          width: 201.8px;
          height: 60px;
          justify-content: center;
          align-items: center;
          /* padding: 20px 30px 20px 30px; */
        }
        .son_xuanze {
          border: 0.1px#D3D3D3 solid;
          width: 201.8px;
          height: 60px;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .caozuo {
      display: flex;
      /*  margin-left: 70%; */
      padding-left: 70%;
      //   margin-top: 100px;
      .anniu {
        width: 150px;
      }
    }
    .biaodan {
      margin-top: 10px;
    }
  }
}
.tc_sr {
  width: 200px;
}
.xinzen {
  display: flex;
  flex-direction: column;
}
</style>
